<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        td {
            width: 70px;
            height: 90px;
            text-align: center;
            background-color: pink;
            border: 1px solid white;
        }
        
        #result {
            background-color: #ccc;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var tds = document.querySelectorAll('td');
            var result = document.querySelector('#result')
            tds.forEach(function(thisvalue) {
                thisvalue.addEventListener('click', function() {
                    if (this.innerHTML == 'c') {
                        result.innerHTML = '';
                    } else if (this.innerHTML == 'del') {
                        result.innerHTML = result.innerHTML.substring(0, result.innerHTML.length - 1);
                    } else if (this.innerHTML == '=') {

                        function parse(content) {
                            var index;
                            index = content.lastIndexOf('(');
                            if (index > -1) {
                                var endindex = content.indexOf(')', index)
                                if (endindex > -1) {
                                    return parse(content.substring(0, index) + parse(content.substring(index + 1, endindex)) + content.substring(endindex + 1));
                                };
                            };
                            index = content.lastIndexOf('+');
                            if (index > -1) {
                                return parseFloat(parse(content.substring(0, index))) + parseFloat(parse(content.substring(index + 1)))
                            };
                            index = content.lastIndexOf('-');
                            if (index > -1) {
                                return parse(content.substring(0, index)) - parse(content.substring(index + 1));
                            }
                            index = content.lastIndexOf('*');
                            if (index > -1) {
                                return parse(content.substring(0, index)) * parse(content.substring(index + 1));
                            }
                            index = content.lastIndexOf('/');
                            if (index > -1) {
                                return parse(content.substring(0, index)) / parse(content.substring(index + 1));
                            }
                            if (content == '') {
                                return 0;
                            } else {
                                return content;
                            }
                        }
                        var resultresult = parse(result.innerHTML)
                        result.innerHTML = resultresult;

                    } else {
                        result.innerHTML = result.innerHTML + this.innerHTML;
                    }
                });
            })
        })
    </script>
</head>

<body>
    <table cellspacing=" 0 ">
        <tr>
            <td colspan="5 " id="result"></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>*</td>
            <td>/</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>+</td>
            <td>-</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>(</td>
            <td>)</td>
        </tr>
        <tr>
            <td>c</td>
            <td>0</td>
            <td>.</td>
            <td>del</td>
            <td>=</td>
        </tr>
    </table>
</body>

</html>